/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form, Input, Radio, Select, Switch, Button, Tooltip, Icon, Row, Col} from 'antd';
import request from '@/utils/request';
import {connect} from 'dva';
import styles from './index.less'
import {convertCurrency} from '@/utils/utils';

const FormItem = Form.Item;
const {TextArea} = Input;

const RadioGroup = Radio.Group;
const Option = Select.Option;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      level: 0,
      invoices: {detail: []},
      detail: {},
      mc: '',
      nsrsbr: '',
      dzdh: '',
      khh: '',
      sjhm: '',
      yxdz: '',
      bz: '',
      bz1: '',
      bz2: '',
      dzdh2: '',
      khh2: '',
      invoicing_type: '',
      step: 1
    };
  }

  onChangeState = (tyle, e) => {
    this.setState({
      [tyle]: e.target.value
    })
  }

  componentDidMount() {
    const that = this;
    this.fetchDetail()
    var a = [1];

  }

  getPreView = () => {
    const that = this;
    request(`/paper_invoices/preview`, {
      method: 'GET',
      params: {
        payment_id: this.props.editRecord.id,
        invoicing_type: this.state.invoicing_type
      }
    }).then((response) => {
      console.log('response', response)
      if (response.status === 200) {
        for (let i = 0; i < response.data.data.length; i++) {
          let restLength = 8 - response.data.data[i].detail.length;
          if (that.state.invoicing_type === 3) {
            restLength = 4 - response.data.data[i].detail.length;

          }
          for (let j = 0; j < restLength; j++) {
            response.data.data[i].detail.push({})
          }

        }

        that.setState({
          invoices: response.data.data,
          dzdh2: '' + response.data.data[0].saleaddress + response.data.data[0].salephone,
          khh2: response.data.data[0].saleaccount,
          step: 2
        })


      }
    })
  }
  //获取基本信息
  fetchDetail = () => {
    const that = this;
    request(`/accounts/${this.props.editRecord.account.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      console.log('fetchDetail', response)
      if (response.status === 200) {
        that.setState({
          detail: response.data.data,
          mc: response.data.data.name,
          nsrsbr: response.data.data.buyer_tax_number,
          dzdh: response.data.data.buyer_address,
          khh: response.data.data.buyer_bank_account,
          sjhm: response.data.data.invoice_push_mobile,
          yxdz: response.data.data.invoice_push_email,
        })
      }


    });
  };
  renderInvoicesItem = (invoices_item) => {
    console.log('invoices_item', invoices_item)
    return invoices_item.detail.map((item, index) => {
      let itemTotal = Number(item.num * item.price);
      let itemTaxrate = itemTotal * (item.taxrate) / (1 + Number(item.taxrate))
      return <tr key={index} style={{height: '23px'}}>
        <td>{item.goodsname}</td>
        <td>{item.ggxh}</td>
        <td>{item.unit}</td>
        <td>{item.num}</td>
        <td>{item.price}</td>
        <td>{item.num ? (itemTotal - itemTaxrate).toFixed(2) : ''}</td>
        <td>{item.taxrate ? (item.taxrate==='0'?'免税':Number(item.taxrate) * 100 + '%') : ''}</td>
        <td>{item.taxrate ? Number(item.hsbz) ? itemTaxrate.toFixed(2) : '***' : ''}</td>
      </tr>
    })
  }
  renderInvoicesTable = () => {
    const invoicing_type = this.state.invoicing_type;
    const detail = this.state.detail;
    const invoices = this.state.invoices;
    console.log('invoices', invoices)
    return invoices.map((item, index) => {
      return <div key={index}>
        <h3 style={{
          textAlign: 'center',
          marginBottom: '16px',
          fontSize: '32px',
          color: (index === 1 || invoicing_type === 4) ? '#ff7400' : '#1950a5',
          fontWeight: 'bold'
        }}>
          {invoicing_type === 1 && '电子发票票'}
          {invoicing_type === 2 && '电子普票'}
          {invoicing_type === 4 && '专用纸票'}
          {invoicing_type === 3 && index === 0 && '专用纸票'}
          {invoicing_type === 3 && index === 1 && '电子普票'}
        </h3>
        <Form onSubmit={this.handleSubmit}>
          <table
            className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
            style={{width: '100%'}}>
            {detail.name &&
              <tbody>
              <tr>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>购买方
                </th>
                <td style={{width: "50%"}}>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>名 <span
                      style={{marginLeft: '52px'}}>称</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                      <Input defaultValue={detail.name} value={this.state.mc} onChange={(e) => {
                        this.onChangeState('mc', e)
                      }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>纳税人识别号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={detail.buyer_tax_number} value={this.state.nsrsbr} onChange={(e) => {
                         this.onChangeState('nsrsbr', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>地址、 <span
                      style={{marginLeft: '10px'}}>电话</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={detail.buyer_address} value={this.state.dzdh} onChange={(e) => {
                         this.onChangeState('dzdh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>开户行及帐号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={detail.buyer_bank_account} value={this.state.khh} onChange={(e) => {
                         this.onChangeState('khh', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                </td>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>通知到
                </th>
                <td style={{width: "50%", verticalAlign: 'top'}}>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>手机号码
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                        <Input defaultValue={detail.invoice_push_mobile} value={this.state.sjhm} onChange={(e) => {
                          this.onChangeState('sjhm', e)
                        }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>邮箱地址
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                        <Input defaultValue={detail.invoice_push_email} value={this.state.yxdz} onChange={(e) => {
                          this.onChangeState('yxdz', e)
                        }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                </td>
              </tr>
              </tbody>}

          </table>
          <table
            className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}
           ${styles.invoice_list} ${(index === 1 || invoicing_type === 4) ? styles.invoice_list2 : ''}`} style={{
            width: '100%',
            borderBottom: '0', borderTop: '0', textAlign: 'center'
          }}>
            <thead>
            <tr>
              <th>*简称*货物或应税劳务、服务名称</th>
              <th>规格型号</th>
              <th>单位</th>
              <th>数量</th>
              <th>单价（含税）</th>
              <th>金额（含税）</th>
              <th>税率</th>
              <th>税额</th>
            </tr>
            </thead>
            <tbody>
            {this.renderInvoicesItem(item)}
            <tr style={{
              height: '23px',
              borderBottom: `2px solid ${(index === 1 || invoicing_type === 4) ? '#ff7400' : '#1950a5'}`
            }}>
              <td>合计</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td>￥{item.bhtaxtotal}</td>
              <td></td>
              <td>￥{item.taxtotal}</td>
            </tr>
            <tr style={{height: '23px'}}>
              <td>价税合计(大写)</td>
              <td colSpan="7"><span style={{
                float: 'left',
                marginLeft: '10px'
              }}>{convertCurrency(item.taxtotal + item.bhtaxtotal)}</span>
                <span style={{
                  float: 'right',
                  marginRight: '50px'
                }}>(小写)￥{(item.taxtotal + item.bhtaxtotal).toFixed(2)}</span></td>
            </tr>
            </tbody>
            <tbody>
            </tbody>

          </table>

          <table
            className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
            style={{width: '100%'}}>
            {item.saleaddress &&
              <tbody>
              <tr>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>销售方
                </th>
                <td style={{width: "50%"}}>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>名 <span
                      style={{marginLeft: '52px'}}>称</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                      <Input defaultValue={'葡城水利'} disabled={true} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>纳税人识别号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input defaultValue={'91440981MABNQEHF9J'} disabled={true}
                              className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>地址、 <span
                      style={{marginLeft: '10px'}}>电话</span> :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true} defaultValue={'' + item.saleaddress + item.salephone}
                              value={this.state.dzdh2} onChange={(e) => {
                         this.onChangeState('dzdh2', e)
                       }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                  <div className={styles.invoice_item}>
                    <label
                      className={`${styles.invoice_item_label} ${(index === 1 || invoicing_type === 4) ? styles.invoice_item_label2 : ''}`}>开户行及帐号
                      :</label>
                    <span className={styles.invoice_item_input_wrap}>
                       <Input disabled={true} defaultValue={item.saleaccount} value={this.state.khh2}
                              onChange={(e) => {
                                this.onChangeState('khh2', e)
                              }} className={styles.invoice_item_input}/>
                    </span>
                  </div>
                </td>
                <th
                  className={`${styles.invoice_make_blue} ${(index === 1 || invoicing_type === 4) ? styles.invoice_make_orange : ''}`}
                  style={{width: "26px", fontSize: '13px', padding: '0 4px'}}>备注
                </th>
                <td style={{width: "50%", verticalAlign: 'top'}}>
                  {
                    invoicing_type !== 3 &&
                    <TextArea defaultValue={''} value={this.state.bz} onChange={(e) => {
                      this.onChangeState('bz', e)
                    }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                  }
                  {
                    invoicing_type === 3  && index === 0 &&
                    <TextArea defaultValue={''} value={this.state.bz1} onChange={(e) => {
                      this.onChangeState('bz1', e)
                    }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                  }
                  {
                    invoicing_type === 3  && index === 1 &&
                    <TextArea defaultValue={''} value={this.state.bz2} onChange={(e) => {
                      this.onChangeState('bz2', e)
                    }} className={styles.invoice_item_input} autoSize={{minRows: 6, maxRows: 6}}/>
                  }
                </td>
              </tr>
              </tbody>}

          </table>
          <table style={{width: '100%', marginTop: '10px'}}>
            <tbody>
            <tr>
              <td style={{paddingLeft: '10px'}}> 收 款 人 : 梁好</td>
              <td> 复 核 : 陈朗</td>
              <td> 开 票 人 : 梁好</td>
              <td> 销 售 方 : (章)</td>
            </tr>
            </tbody>
          </table>

        </Form>
      </div>
    })
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const editRecord = this.props.editRecord;

    return (
      <div style={{fontSize: "13px"}}>
        {
          this.state.step === 1 &&
          <div>
            <div style={{width: '440px', margin: '50px auto'}}>
              <div onClick={() => {
                this.setState({invoicing_type: 1}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '200px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#0a82ff',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>电子发票 >
              </div>
              {/* <div onClick={() => {
                this.setState({invoicing_type: 2}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '200px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#0060c4',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>
                纸质发票 >
                电子专票+电子普票 >
              </div>
              <div onClick={() => {
                this.setState({invoicing_type: 4}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '200px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#ff7400',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>专用纸票 >
              </div>
              <div onClick={() => {
                this.setState({invoicing_type: 3}, function () {
                  this.getPreView()
                })
              }} style={{
                width: '200px',
                height: '60px',
                lineHeight: '60px',
                cursor: 'pointer',
                margin: '10px',
                display: 'inline-block',
                textAlign: 'center',
                border: '1px solid #ccc',
                borderRadius: '5px',
                background: '#bd0e21',
                color: '#fff',
                fontWeight: 'bold',
                fontSize: '18px'
              }}>专用纸票+电子普票 >
              </div> */}
            </div>
          </div>
        }
        {
          this.state.step === 2 && this.renderInvoicesTable()

        }

      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
